import React, { Component } from 'react';
import '../css/border.css'


class Borders extends Component {
  constructor(props) {
    super(props)

  }
  componentDidMount() {

  }

  render() {
    return (
      <div>
        <div className="home-title flex-column justify-align-center">
          <p>没有错，下面的border效果都是通过 css 实现的</p>
          <p>快来看一看</p>
          <div className="mask-box"></div>
        </div>
        <div className="example flex-row justify-align-center">

          <div className="item-box gradient-border">
            渐变动画border
            <p className="qd">缺点：需内容部分设置background-color</p>
          </div>

          <div className="item-box move-dashed">
            <div className="item">
              滚动虚框效果
              <p className="">原理：斜纹使用CSS3重复线性渐变属性repeating-linear-gradient实现，
                而规律运动是CSS3动画实现的，跟发廊里旋转的斜纹柱子其实有异曲同工之处</p>
              <p className="qd">缺点：需内容部分设置background-color</p>
            </div>
          </div>

          <div className="item-box">
            <div className="item move-anomalous">
              <img src={require('../imgs/selection-fruit.png')} />
            </div>
            <p className="qd">
              这个方法有点笨，背景是gif动图，水果图上水果周围有1px的透明区域
            </p>
          </div>

          <div className="item-box move-part">
            <div className="item">
              实线边框loading动画
              <p className="">原理：使用CSS clip属性对边框进行剪裁而已</p>
            </div>
          </div>
          <div className="item-box">
            <button className='aaa lined thick'>Lined Thick</button>
          </div>
          <div className="item-box">
            <button className='aaa dotted thick'>Dotted Thick</button>
          </div>
          <div className="item-box">
            <button className='aaa dashed thick'>Dashed Thick</button>
          </div>
          <div className="item-box">
            <button className='aaa lined thin'>Lined Thin</button>
          </div>
          <div className="item-box">
            <button className='aaa dotted thin'>Dotted Thin</button>
          </div>
          <div className="item-box">
            <button className='aaa dashed thin'>Dashed Thin</button>
          </div>
          <div className="item-box"></div>
          <div className="item-box"></div>


        </div>

        <div className="home-title flex-column justify-align-center">
          <p>hover 试试</p>
          <div className="mask-box"></div>
        </div>
        <div className="example flex-row justify-align-center">

          <div className="item-box btn--corners">
            Portfolio
          </div>

          <div className="item-box">
            <button className="btn-hover draw">Draw</button>

            <button className="btn-hover draw meet">Draw Meet</button>

            <button className="btn-hover center">Center</button>

            <button className="btn-hover spin">Spin</button>

            <button className="btn-hover spin circle">Spin Circle</button>

            <button className="btn-hover spin thick">Spin Thick</button>
          </div>


        </div>


      </div>
    );
  }
}

export default Borders;
